<script setup lang="ts">
import {LoginForm} from './components'
// import { ThemeSwitch } from '@/components/ThemeSwitch'
// import { LocaleDropdown } from '@/components/LocaleDropdown'
// import { useI18n } from '@/hooks/web/useI18n'
import {underlineToHump} from '@/utils'
import {useAppStore} from '@/store/modules/app'
import {useDesign} from '@/hooks/web/useDesign'
import {onMounted} from 'vue'

const {getPrefixCls} = useDesign()

const prefixCls = getPrefixCls('login')

const appStore = useAppStore()

// const { t } = useI18n()

onMounted(() => {
  // log()
})
const log = () => {
  const random = (min: number, max: number) => min + Math.floor(Math.random() * (max - min + 1))
  let crossBarGlitchTexts = document.querySelectorAll('.cross-bar-glitch')
  crossBarGlitchTexts.forEach((text) => {
    let content = text.textContent
    text.textContent = ''
    let slice: any = (text as HTMLElement).dataset.slice
    let glitchText = document.createElement('div')
    glitchText.className = 'glitch'
    ;(glitchText as HTMLElement).style.setProperty('--slice-count', slice)
    for (let i = 0; i <= Number(slice); i++) {
      let span = document.createElement('span')
      span.textContent = content
      span.style.setProperty('--i', `${i + 1}`)
      if (i !== Number(slice)) {
        span.style.animationDelay = `${800 + random(100, 300)}ms`
      }
      glitchText.append(span)
    }
    text.appendChild(glitchText)
    let bars = document.createElement('div')
    bars.className = 'bars'
    for (let i = 0; i < 5; i++) {
      let bar = document.createElement('div')
      bar.className = 'bar'
      bars.append(bar)
    }
    text.append(bars)
  })
}
</script>

<template>
  <div
    :class="prefixCls"
    class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px"
  >
    <div class="relative h-full flex mx-auto">
      <div
        :class="`${prefixCls}__left  bg-gray-500 bg-opacity-20 relative p-30px <xl:hidden w-2/5`"
        style="background: var(--el-color-primary) !important"
      >
        <div class="flex items-center relative text-white">
          <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px"/>
          <span class="text-30px font-bold cross-bar-glitch" data-slice="20">昶健科技</span>
        </div>
        <div class="flex justify-center items-end h-[calc(100%-60px)]">
          <TransitionGroup
            appear
            tag="div"
            enter-active-class="animate__animated animate__bounceInLeft"
          >
            <!-- <img src="@/assets/svgs/login-box-bg.svg" key="1" alt="" class="w-350px" /> -->
            <h1 class="text-5xl text-white" key="1">HI！你好！</h1>
            <div class="text-3xl text-white mt-5" key="2">欢迎进入多参数监测系统</div>
            <img src="@/assets/imgs/login_ch.png" alt="" class="w-md mt-50"/>
            <!-- <div class="mt-5 font-normal text-white text-14px" key="3">
              {{ t('login.message') }}
            </div> -->
          </TransitionGroup>
        </div>
      </div>
      <div class="flex-1 p-30px <sm:p-10px dark:bg-v-dark relative">
        <div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end">
          <div class="flex items-center @2xl:hidden @xl:hidden">
            <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px"/>
            <span class="text-20px font-bold cross-bar-glitch" data-slice="20">{{
                underlineToHump(appStore.getTitle)
              }}</span>
          </div>

          <!-- <div class="flex justify-end items-center space-x-10px">
            <ThemeSwitch />
            <LocaleDropdown class="<xl:text-white dark:text-white" />
          </div> -->
        </div>
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
          <div
            class="h-full flex m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px @lg:max-w-500px"
            style="de"
          >
            <LoginForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"/>
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-login';

.@{prefix-cls} {
  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/svgs/login-bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      content: '';
    }
  }
}

.cross-bar-glitch {
  position: relative;

  .bars {
    @bars-dalay: 0.3s, 0.2s, 0.5s, 0.3s, 0.4s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .bar {
      width: 100%;
      flex: 1;
      background: currentColor;
      border-radius: 50px;
      animation: 0.6s cubic-bezier(0.4, 0.2, 0.175, 1) forwards;

      &:nth-child(odd) {
        transform: translateX(100%);
        animation-name: slide-left;
      }

      &:nth-child(even) {
        transform: translateX(-100%);
        animation-name: slide-right;
      }
    }

    .bar(@i) when (@i<=5) {
      .bar:nth-child(@{i}) {
        animation-delay: extract(@bars-dalay, @i);
      }
      .bar(@i+ 1);
    }
    .bar(1);
  }

  .glitch {
    opacity: 0;
    animation: reveal forwards 0.3s;
    animation-delay: 0.6s;

    span {
      &:not(:last-child) {
        --ratio: calc(100% / var(--slice-count));
        --top: calc(var(--ratio) * (var(--i) - 1));
        --bottom: calc(var(--ratio) * (var(--slice-count) - var(--i)));

        position: absolute;
        white-space: nowrap;
        clip-path: inset(var(--top) 0 var(--bottom) 0);
        animation-duration: 0.3s;
      }

      &:nth-child(odd) {
        animation-name: slide-from-left;
      }

      &:nth-child(even) {
        animation-name: slide-from-right;
      }

      &:last-child {
        opacity: 0;
        animation: reveal steps(1) forwards;
        animation-delay: 0.6s + 0.6s;
      }
    }
  }
}

@keyframes slide-from-left {
  from {
    transform: translateX(-20%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(20%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes reveal {
  to {
    opacity: 1;
  }
}

@keyframes slide-left {
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-right {
  to {
    transform: translateX(100%);
  }
}
</style>
